<template>
  <div class="app-container" style="padding:30px">
    <el-input
      v-model="filterText"
      placeholder="输入查询条件" />

    <el-tree
      ref="subjectTree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :default-expand-all="true"
      style="margin-top:10px;" />
  </div>
</template>
<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      filterText: '',
      subjectList: [], // 数据列表
      defaultProps: { // 属性列表数据属性的key
        children: 'children', // 显示的树形图中子集合的属性名
        label: 'title'// 显示树形图 每个元素标题的属性名
      }
    }
  },
  // 监听filterText的变化
  watch: {
    filterText(val) {
      this.$refs.subjectTree.filter(val) // 调用tree的filter方法
    }
  },
  created() {
    this.fetchNodeList()
  },
  methods: {
    // 获取远程数据
    fetchNodeList() {
      subjectApi.getNestedTreeList().then(res => {
        this.subjectList = res.data.items
      })
    },
    // // 过滤节点
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.title.indexOf(value) !== -1
    // },
    // 忽略大小写
    filterNode(val, data) {
      if (!val) return true
      return data.title.toLowerCase().indexOf(val.toLowerCase()) !== -1
    }
  }
}
</script>
